<template>
	<view class="input-region">
		<view class="label">
			<text :class="{required: required}">{{label}}</text>
			<text>:</text>
		</view>
		<view class="region-select">
			<view class="region-text" @tap="openAddres">{{addressText}}</view>
			<image class="arrow-down" src="@/common/imgs/arrow-down.png"></image>
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	export default {
		props: {
			label: {
				type: String
			},
			required: {
				type: Boolean,
				default: false
			},
			value: {
				type: String
			}
		},
		name:"input-region",
		watch: {
			value: function(val){
				if(val) {
					this.addressText = val
				}
			}
		},
		data() {
			return {
				cityPickerValueDefault: [18, 6, 6],
				addressText: '请选择',
			};
		},
		methods: {
			openAddres() {
				this.cityPickerValueDefault = [18, 6, 6]
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				console.log(e)
				this.addressText = e.label;
				this.$emit('update:value', e.label)
			},
		}
	}
</script>

<style lang="less">
@import url('@/common/less/vars.less');
.input-region{
	color: @text-color;
	font-size: @main-font-size;
	margin-bottom: 14px;
	
	&>.label{
		margin-bottom: 6px;
	}
	
	&>.label >text:first-child.required::after{
		content: '*';
		color: @theme-color;
		font-size: @main-font-size;
	}
	
	&>.label >text:nth-child(2) {
		margin-left: 7.03rpx;
	}
	
	.region-select{
		background-color: @theme-color;
		color: #fff;
		height: 32px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		
		.region-text{
			margin-left: 16.4rpx;
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
		}
		
		.arrow-down{
			width: 29.29rpx;
			height: 15.23rpx;
			position: absolute;
			right: 8px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}
</style>
